<template>
  <div>
    <div>
      <span>姓名：</span>
      <el-input v-model="inputname" placeholder="姓名查询"></el-input>
      <span>单位：</span>
      <el-input v-model="inputcompany" placeholder="单位查询"></el-input>
      <span>订单日期</span>
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search">查询</el-button>
      <el-button type="primary" icon="el-icon-refresh-right">重置</el-button>
    </div>
    <div>
      <div class="div">
        <span>类型</span>
        <el-radio v-model="radio" label="1">全部</el-radio><br />
        &#12288;&#12288;&#8197;<el-radio v-model="radio" label="2"
          >合伙人</el-radio
        ><br />
        &#12288;&#12288;&#8197;<el-radio v-model="radio" label="3"
          >大客户</el-radio
        >
      </div>
      <div class="div">
        <span>卡类型</span>
        <el-radio v-model="radio1" label="4">全部</el-radio><br />
        &#12288;&#12288;&#12288;&#8197;<el-radio v-model="radio1" label="5"
          >虚拟卡</el-radio
        ><br />
        &#12288;&#12288;&#12288;&#8197;<el-radio v-model="radio1" label="6"
          >实体卡</el-radio
        >
      </div>
      <div class="div">
        <el-button type="primary">导出到excel</el-button>
      </div>
    </div>
    <div>
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        style="width: 100%"
      >
        <el-table-column prop="serialnumber" label="订单编号" width="180">
        </el-table-column>
        <el-table-column prop="number" label="订单数量"> </el-table-column>
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="unit" label="单位" width="180">
        </el-table-column>
        <el-table-column prop="creationtime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="productname" label="产品名称" width="180">
        </el-table-column>
        <el-table-column prop="price" label="单价" width="180">
        </el-table-column>
        <el-table-column prop="paymonney" label="支付金额" width="180">
        </el-table-column>
        <el-table-column prop="paymode" label="支付方式" width="180">
        </el-table-column>
        <el-table-column prop="paydate" label="支付日期" width="180">
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[4,8]"
        :page-size="4"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        style="text-align:center"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [
        {
          serialnumber: "2016-05-02",
          number: "200",
          name: "王小虎",
          unit: "上海市",
          creationtime: "2021-03-032130",
          productname: "年卡",
          price: "651",
          paymonney: "111111",
          paymode: "微信",
          paydate: "2021-1616416",
        },
        {
          serialnumber: "2016-05-02",
          number: "200",
          name: "王小虎",
          unit: "上海市",
          creationtime: "2021-03-032130",
          productname: "年卡",
          price: "651",
          paymonney: "111111",
          paymode: "微信",
          paydate: "2021-1616416",
        },
        {
          serialnumber: "2016-05-02",
          number: "200",
          name: "王小虎",
          unit: "上海市",
          creationtime: "2021-03-032130",
          productname: "年卡",
          price: "651",
          paymonney: "111111",
          paymode: "微信",
          paydate: "2021-1616416",
        },
        {
          serialnumber: "2016-05-02",
          number: "200",
          name: "王小虎",
          unit: "上海市",
          creationtime: "2021-03-032130",
          productname: "年卡",
          price: "651",
          paymonney: "111111",
          paymode: "微信",
          paydate: "2021-1616416",
        },
      ],
      radio: "1",
      radio1: "1",
      inputname: "",
      inputconpany: "",
      pickerOptions: {
        shortcuts: [
          {
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
};
</script>
<style scoped>
.div {
  display: inline-block;
}
</style>
